Upload.js ➔ initDropzone - Code Metrics - Inspection of "fixing error upload js" - o2system/venus-form - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — master ( df8eb2...0e4d57 )

by Nur

created 2019-04-15 14:06 UTC

Upload.js ➔ initDropzone B

↳ Parent: Project

Complexity

Conditions	4
Paths	170

Size

Total Lines	153
Code Lines	105

Duplication

Lines	29
Ratio	18.95 %

Importance

Changes	5
Bugs	1	Features	0

Metric	Value
cc	4
eloc	105
c	5
b	1
f	0
nc	170
nop	0
dl	29
loc	153
rs	7

How to fix Long Method

/**
 * This file is part of the O2System Venus UI Framework package.
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 *
 * @author         Steeve Andrian Salim
 * @copyright      Copyright (c) Steeve Andrian Salim
 */
// ------------------------------------------------------------------------

import * as $ from 'jquery';
import * as Dropzone from 'dropzone';
import 'dropify/dist/js/dropify';

/**
 * Class Upload
 *
 * @author          Teguh Rianto
 * @package         Components
 */
export default class Upload {
    constructor() {
        /**
         * Init dropzone
         */
        this.initDropzone();

        /**
         * Init dropify
         */
        this.initDropify();
    }

    initDropzone() {
        if (typeof Dropzone != 'undefined') {
            //Dropzone.autoDiscover = false;

            // Cards version
<<<<<<< HEAD
            const dropzoneCards = $('#dropzone-cards');
            if(dropzoneCards.length) {

                let dropzoneCardsActionUrl = dropzoneCards.data('action-url');
=======
            if($('#dropzone-cards').length) {
                let dropzoneCardsElement = $('#dropzone-cards');
                let dropzoneCardsActionUrl = dropzoneCardsElement.data('action-url');
>>>>>>> df8eb29131c877502f54faf83d32c263757a1ed8

                let dropzoneCardsFilePreview = dropzoneCardsElement.find('#dropzone-cards-template');
                dropzoneCardsFilePreview.removeAttr('id');

                let dropzoneCardsFilePreviewTemplate = dropzoneCardsFilePreview.parent().html();
                dropzoneCardsFilePreview.parent().remove();

                let dropzoneCardForms = $('#dropzone-cards-form').dropzone({
                    url: dropzoneCardsActionUrl,
                    autoProcessQueue: true,
                    thumbnailWidth: null,
                    thumbnailHeight: null,
                    previewTemplate: dropzoneCardsFilePreviewTemplate
                });

                dropzoneCards.on("addedfile", function (file) {
                    console.log('titit');
                    var fileId = 'media' + document.querySelectorAll('.media-list-item').length;
                    file.previewElement.getElementsByTagName('input')[0].setAttribute('id', fileId);
                    file.previewElement.getElementsByTagName('label')[0].setAttribute('for', fileId);

                    var imagesFileTypes = ['image/png', 'image/jpg', 'image/jpeg', 'image/gif'];
                    if (imagesFileTypes.indexOf(file.type) != -1) {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'none';
                    } else if (file.type === 'application/pdf') {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-pdf"></i>';
                    } else if (file.type === 'application/doc' | 'application/docx') {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-word"></i>';
                    } else if (file.type === 'application/ppt' | 'application/pptx') {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-powerpoint"></i>';
                    } else if (file.type === 'video/mp4' | 'video/webm' | 'video/mkv') {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-video"></i>';
                    } else if (file.type === 'audio/mpeg') {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-audio"></i>';
                    } else {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file"></i>';
                    }
                });

                dropzoneCards.on("success", function (file, resp) {
                    file.previewElement.querySelector(".media-list-item").classList.remove('uploading');
                    file.previewElement.querySelector(".upload-progress").style.display = 'none';
                    file.previewElement.querySelector(".media-item-file-extension").innerHTML = file.type;
                });

                dropzoneCards.on("error", function (file) {
                    file.previewElement.querySelector(".media-list-item").classList.remove('uploading');
                    file.previewElement.querySelector(".upload-progress").style.display = 'none';
                    file.previewElement.querySelector(".media-item-file-extension").innerHTML = file.type;
                });
            }

            // Table version
<<<<<<< HEAD
            const dropzoneTable = $('#dropzone-table');
            if(dropzoneTable.length) {

                let dropzoneTableActionUrl = dropzoneTable.data('action-url');
=======
            if($('#dropzone-table').length) {
                let dropzoneTableElement = $('#dropzone-table');
                let dropzoneTableActionUrl = dropzoneTableElement.data('action-url');
>>>>>>> df8eb29131c877502f54faf83d32c263757a1ed8

                let dropzoneTableFilePreview = dropzoneTableElement.find('#dropzone-table-template');
                dropzoneTableFilePreview.removeAttr('id');

                let dropzoneTableFilePreviewTemplate = dropzoneTableFilePreview.parent().html();
                dropzoneTableFilePreview.parent().remove();

                let dropzoneTable = $('#dropzone-table-form').dropzone({
                    url: dropzoneTableActionUrl,
                    autoProcessQueue: false,
                    thumbnailWidth: null,
                    thumbnailHeight: null,
                    previewTemplate: dropzoneTableFilePreviewTemplate, // Define the container to display the previews
                    previewsContainer: ".media-list-table",
                    clickable: "#dropzone-add-file", // Define the element that should be used as click trigger to select files.
                });
                
                dropzoneTable.on("addedfile", function (file) {
                    console.log('test');
                    var imagesFileTypes = ['image/png', 'image/jpg', 'image/jpeg', 'image/gif'];
                    if (imagesFileTypes.indexOf(file.type) != -1) {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'none';
                    } else if (file.type === 'application/pdf') {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-pdf"></i>';
                    } else if (file.type === 'application/doc' | 'application/docx') {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-word"></i>';
                    } else if (file.type === 'application/ppt' | 'application/pptx') {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-powerpoint"></i>';
                    } else if (file.type === 'video/mp4' | 'video/webm' | 'video/mkv') {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-video"></i>';
                    } else if (file.type === 'audio/mpeg') {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-audio"></i>';
                    } else {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file"></i>';
                    }
                    // Hookup the start button
                    file.previewElement.querySelector(".start").onclick = function() { dropzoneTable.enqueueFile(file); };
                });

                dropzoneTable.on("totaluploadprogress", function(progress) {
                    document.querySelector("#dropzone-table-total-progress .progress-bar").style.width = progress + "%";
                });

                dropzoneTable.on("sending", function(file) {
                    // Show the total progress bar when upload starts
                    document.querySelector("#dropzone-table-total-progress").style.opacity = "1";
                    // And disable the start button
                    file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
                });

                dropzoneTable.on("success", function (file, resp) {
                    file.previewElement.querySelector(".upload-progress").style.display = 'none';
                    file.previewElement.querySelector(".media-item-file-extension").innerHTML = file.type;
                });

                dropzoneTable.on("error", function (file) {
                    file.previewElement.querySelector(".upload-progress").style.display = 'none';
                    file.previewElement.querySelector(".media-item-file-extension").innerHTML = file.type;
                });

                dropzoneTable.on("queuecomplete", function(progress) {
                    document.querySelector("#dropzone-table-total-progress").style.opacity = "0";
                });

                // Setup the buttons for all transfers
                // The "add files" button doesn't need to be setup because the config
                // `clickable` has already been specified.
                document.querySelector("#dropzone-table-actions .start").onclick = function() {
                    dropzoneTable.enqueueFiles(dropzoneTable.getFilesWithStatus(Dropzone.ADDED));
                };

                document.querySelector("#dropzone-table-actions .cancel").onclick = function() {
                    dropzoneTable.removeAllFiles(true);
                };
            }
        }
    }

    initDropify(){
        $('.dropify').dropify();
    }
}

1			/**
2			* This file is part of the O2System Venus UI Framework package.
3			*
4			* For the full copyright and license information, please view the LICENSE
5			* file that was distributed with this source code.
6			*
7			* @author Steeve Andrian Salim
8			* @copyright Copyright (c) Steeve Andrian Salim
9			*/
10			// ------------------------------------------------------------------------
11
12			import * as $ from 'jquery';
13			import * as Dropzone from 'dropzone';
14			import 'dropify/dist/js/dropify';
15
16			/**
17			* Class Upload
18			*
19			* @author Teguh Rianto
20			* @package Components
21			*/
22			export default class Upload {
23			constructor() {
24			/**
25			* Init dropzone
26			*/
27			this.initDropzone();
28
29			/**
30			* Init dropify
31			*/
32			this.initDropify();
33			}
34
35			initDropzone() {
36			if (typeof Dropzone != 'undefined') {
37			//Dropzone.autoDiscover = false;
38
39			// Cards version
40			<<<<<<< HEAD
41			const dropzoneCards = $('#dropzone-cards');
42			if(dropzoneCards.length) {
43
44			let dropzoneCardsActionUrl = dropzoneCards.data('action-url');
45			=======
46			if($('#dropzone-cards').length) {
47			let dropzoneCardsElement = $('#dropzone-cards');
48			let dropzoneCardsActionUrl = dropzoneCardsElement.data('action-url');
49			>>>>>>> df8eb29131c877502f54faf83d32c263757a1ed8
50
51			let dropzoneCardsFilePreview = dropzoneCardsElement.find('#dropzone-cards-template');
52			dropzoneCardsFilePreview.removeAttr('id');
53
54			let dropzoneCardsFilePreviewTemplate = dropzoneCardsFilePreview.parent().html();
55			dropzoneCardsFilePreview.parent().remove();
56
57			let dropzoneCardForms = $('#dropzone-cards-form').dropzone({
58			url: dropzoneCardsActionUrl,
59			autoProcessQueue: true,
60			thumbnailWidth: null,
61			thumbnailHeight: null,
62			previewTemplate: dropzoneCardsFilePreviewTemplate
63			});
64
65			dropzoneCards.on("addedfile", function (file) {
66			console.log('titit');
67			var fileId = 'media' + document.querySelectorAll('.media-list-item').length;
68			file.previewElement.getElementsByTagName('input')[0].setAttribute('id', fileId);
69			file.previewElement.getElementsByTagName('label')[0].setAttribute('for', fileId);
70
71			var imagesFileTypes = ['image/png', 'image/jpg', 'image/jpeg', 'image/gif'];
72			if (imagesFileTypes.indexOf(file.type) != -1) {
73			file.previewElement.querySelector('.media-item-file-details').style.display = 'none';
74			} else if (file.type === 'application/pdf') {
75			file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
76			file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-pdf"></i>';
77			} else if (file.type === 'application/doc' \| 'application/docx') {
78			file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
79			file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-word"></i>';
80			} else if (file.type === 'application/ppt' \| 'application/pptx') {
81			file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
82			file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-powerpoint"></i>';
83			} else if (file.type === 'video/mp4' \| 'video/webm' \| 'video/mkv') {
84			file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
85			file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-video"></i>';
86			} else if (file.type === 'audio/mpeg') {
87			file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
88			file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-audio"></i>';
89			} else {
90			file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
91			file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file"></i>';
92			}
93			});
94
95			dropzoneCards.on("success", function (file, resp) {
96			file.previewElement.querySelector(".media-list-item").classList.remove('uploading');
97			file.previewElement.querySelector(".upload-progress").style.display = 'none';
98			file.previewElement.querySelector(".media-item-file-extension").innerHTML = file.type;
99			});
100
101			dropzoneCards.on("error", function (file) {
102			file.previewElement.querySelector(".media-list-item").classList.remove('uploading');
103			file.previewElement.querySelector(".upload-progress").style.display = 'none';
104			file.previewElement.querySelector(".media-item-file-extension").innerHTML = file.type;
105			});
106			}
107
108			// Table version
109			<<<<<<< HEAD
110			const dropzoneTable = $('#dropzone-table');
111			if(dropzoneTable.length) {
112
113			let dropzoneTableActionUrl = dropzoneTable.data('action-url');
114			=======
115			if($('#dropzone-table').length) {
116			let dropzoneTableElement = $('#dropzone-table');
117			let dropzoneTableActionUrl = dropzoneTableElement.data('action-url');
118			>>>>>>> df8eb29131c877502f54faf83d32c263757a1ed8
119
120			let dropzoneTableFilePreview = dropzoneTableElement.find('#dropzone-table-template');
121			dropzoneTableFilePreview.removeAttr('id');
122
123			let dropzoneTableFilePreviewTemplate = dropzoneTableFilePreview.parent().html();
124			dropzoneTableFilePreview.parent().remove();
125
126			let dropzoneTable = $('#dropzone-table-form').dropzone({
127			url: dropzoneTableActionUrl,
128			autoProcessQueue: false,
129			thumbnailWidth: null,
130			thumbnailHeight: null,
131			previewTemplate: dropzoneTableFilePreviewTemplate, // Define the container to display the previews
132			previewsContainer: ".media-list-table",
133			clickable: "#dropzone-add-file", // Define the element that should be used as click trigger to select files.
134			});
135
136			dropzoneTable.on("addedfile", function (file) {
137			console.log('test');
138			var imagesFileTypes = ['image/png', 'image/jpg', 'image/jpeg', 'image/gif'];
139			if (imagesFileTypes.indexOf(file.type) != -1) {
140			file.previewElement.querySelector('.media-item-file-details').style.display = 'none';
141			} else if (file.type === 'application/pdf') {
142			file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
143			file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-pdf"></i>';
144			} else if (file.type === 'application/doc' \| 'application/docx') {
145			file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
146			file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-word"></i>';
147			} else if (file.type === 'application/ppt' \| 'application/pptx') {
148			file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
149			file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-powerpoint"></i>';
150			} else if (file.type === 'video/mp4' \| 'video/webm' \| 'video/mkv') {
151			file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
152			file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-video"></i>';
153			} else if (file.type === 'audio/mpeg') {
154			file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
155			file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-audio"></i>';
156			} else {
157			file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
158			file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file"></i>';
159			}
160			// Hookup the start button
161			file.previewElement.querySelector(".start").onclick = function() { dropzoneTable.enqueueFile(file); };
162			});
163
164			dropzoneTable.on("totaluploadprogress", function(progress) {
165			document.querySelector("#dropzone-table-total-progress .progress-bar").style.width = progress + "%";
166			});
167
168			dropzoneTable.on("sending", function(file) {
169			// Show the total progress bar when upload starts
170			document.querySelector("#dropzone-table-total-progress").style.opacity = "1";
171			// And disable the start button
172			file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
173			});
174
175			dropzoneTable.on("success", function (file, resp) {
176			file.previewElement.querySelector(".upload-progress").style.display = 'none';
177			file.previewElement.querySelector(".media-item-file-extension").innerHTML = file.type;
178			});
179
180			dropzoneTable.on("error", function (file) {
181			file.previewElement.querySelector(".upload-progress").style.display = 'none';
182			file.previewElement.querySelector(".media-item-file-extension").innerHTML = file.type;
183			});
184
185			dropzoneTable.on("queuecomplete", function(progress) {
186			document.querySelector("#dropzone-table-total-progress").style.opacity = "0";
187			});
188
189			// Setup the buttons for all transfers
190			// The "add files" button doesn't need to be setup because the config
191			// `clickable` has already been specified.
192			document.querySelector("#dropzone-table-actions .start").onclick = function() {
193			dropzoneTable.enqueueFiles(dropzoneTable.getFilesWithStatus(Dropzone.ADDED));
194			};
195
196			document.querySelector("#dropzone-table-actions .cancel").onclick = function() {
197			dropzoneTable.removeAllFiles(true);
198			};
199			}
200			}
201			}
202
203			initDropify(){
204			$('.dropify').dropify();
205			}
206			}

o2system / venus-form

GitHub Access Token became invalid

Push — master ( df8eb2...0e4d57 )

Upload.js ➔ initDropzone B

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like